@use '../../style/themes/index' as theme;

$message-prefix-cls: '#{theme.$prefix}-message';

.#{$message-prefix-cls} {

  position: fixed; //生成绝对定位的元素， 相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。
  top: 8px;
  left: 0;
  z-index: #{theme.$zIndex-message};
  width: 100%;
  pointer-events: none; //去掉鼠标事件

  &-notice {
    padding: 8px;
    // text-align: start; //根据文字的方向(direction)来决定对齐方式，如果文字方向是从左向右，效果和left相同，内联元素左对齐。如果文字方向是从右向左，效果和right相同，内联元素右对齐。
    text-align: center;
  }
  &-notice-content {
    display: inline-block;
    // padding: #{theme.$message-notice-content-padding};//移至下面
    background: #{theme.$message-notice-content-bg};
    border-radius: #{theme.$radius-size};
    box-shadow: #{theme.$shadow-2};
    pointer-events: all;
  }
  &-custom-content {
    width: 680px;
    padding: #{theme.$message-notice-content-padding};
    text-align: left;
    border-radius: #{theme.$radius-size};
    border:1px solid;
    color: #{theme.$ongoing-color};
    background: #{theme.$ongoing-bg-color};
    border-color: #{theme.$ongoing-border-color};
    
    &-success {
      color: #{theme.$success-color};
      background: #{theme.$success-bg-color};
      border-color: #{theme.$success-border-color};
    }
    &-warning {
      color: #{theme.$warning-color};
      background: #{theme.$warning-bg-color};
      border-color: #{theme.$warning-border-color};
    }
    &-error {
      color: #{theme.$error-color};
      background: #{theme.$error-bg-color};
      border-color: #{theme.$error-border-color};
    }
    &-info,&-loading {
      color: #{theme.$ongoing-color};
      background: #{theme.$ongoing-bg-color};
      border-color: #{theme.$ongoing-border-color};
    }
  }

  &-success .#{theme.$iconfont-css-prefix} {
    color: #{theme.$success-color};
  }
  &-error .#{theme.$iconfont-css-prefix} {
    color: #{theme.$error-color};
  }
  &-warning .#{theme.$iconfont-css-prefix} {
    color: #{theme.$warning-color};
  }
  &-info .#{theme.$iconfont-css-prefix},
  &-loading .#{theme.$iconfont-css-prefix}{
    color: #{theme.$ongoing-color};
  }

  .#{theme.$iconfont-css-prefix} {
    position: relative;
    top: 1px;
    margin-right: 8px;
    font-size:  #{theme.$large-font-size};
  }

  &-notice .#{theme.$prefix}-move-up-leave .#{theme.$prefix}-move-up-leave-active {
    animation-name: MessageMoveOut;
    animation-duration: 0.3s;
  }

  @keyframes MessageMoveOut {
    0% {
      max-height: 150px;
      padding: 8px;
      opacity: 1;
    }
  
    100% {
      max-height: 0;
      padding: 0;
      opacity: 0;
    }
  }
}